<template>
  <section class="chat-conservation">
    <div class="chat-messages">
      <el-scrollbar class="chat-scroll" ref="scrollbarRef">
        <div v-for="item in messages" :key="item.id" :class="['message',{'message-mine': item.type === 'mine'}]">
          <image-preview :width="40" :height="40" :src="item.avatar" class=""></image-preview>
          <div class="chat-bubble">
            <template v-if="item.contentType === 'text'">
              {{ item.text }}
            </template>
            <template v-else-if="item.contentType === 'image'">
              <image-preview :width="100" :height="100" :src="item.content" class=""></image-preview>
            </template>
            <template v-else-if="item.contentType === 'video'">
              <video controls class="content-video" muted @loadeddata="onVideoLoaded">
                <source :src="item.content" type="video/mp4" />
                你的浏览器不支持视频播放。
              </video>
            </template>
            <template v-else-if="item.contentType === 'file'">
              <FilePreview v-model="item.content"></FilePreview>
            </template>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="chat-content">
      <div class="chat-bar">
        <V3Emoji
            @click-emoji="onVue3Emoje"
            :optionsName="optionsName"
            :recent="true"
            class="send-emoji"
        >
          <div class="icon icon-hover tooltip-custom" data-tooltip="表情包">
            <svg-icon icon-class="emoji" />
          </div>
        </V3Emoji>
        <div class="icon icon-hover tooltip-custom send-file" data-tooltip="发送文件">
          <FileUpload >
            <svg-icon icon-class="file" />
          </FileUpload>
        </div>
        <div class="icon icon-hover tooltip-custom-left send-video" data-tooltip="视频通话" @click="videoPhone">
          <svg-icon icon-class="videoPhone" data-tooltip="视频通话"/>
        </div>
      </div>
      <textarea
          v-model="inputText"
          type="textarea"
          @keyup.enter="sendMessage" class="cancel-input-border message-input"
      />
      <el-popover
          placement="bottom"
          title="不能发送空白信息"
          :show-after="1000"
          trigger="click"
          :visible="visible"
          popper-class="send-tips"
          @show="touchShow"
      >
        <template #reference>
          <div @click="sendMessage" class="send-message">发送(S)</div>
        </template>
      </el-popover>
    </div>
  </section>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import FilePreview from './FilePreview.vue'
import FileUpload from './FileUpload.vue'

import V3Emoji from "vue3-emoji";
import "vue3-emoji/dist/style.css";
import ImagePreview from "@/components/ImagePreview/index.vue";

const props = defineProps({
  messages: Array
});
const inputText = ref('');
const scrollbarRef = ref(null);
const visible = ref(false)
const optionsName = {
  'Smileys & Emotion': '笑脸&表情',
  'Food & Drink': '食物&饮料',
  'Animals & Nature': '动物&自然',
  'Travel & Places': '旅行&地点',
  'People & Body': '人物&身体',
  Objects: '物品',
  Symbols: '符号',
  Flags: '旗帜',
  Activities: '活动'
};

// 在组件挂载后滚动到底部
onMounted(() => {
  scrollToBottom();
});


// 监听 messages 的变化，每次变化后滚动到底部
watch(() => props.messages, () => {
  scrollToBottom();
}, { deep: true });

// 隐藏提示语
const touchShow = () => {
  setTimeout(() => {
    visible.value = false;
  }, 1000000);
}

// 表情选择
const onVue3Emoje = (val) => {
  inputText.value += val;
  console.log("inputText.toString()", inputText.value.toString())
};

// 消息发送
const sendMessage = () => {
  if (inputText.value.trim()) {
    console.log('发送消息:', inputText.value);
    inputText.value = '';
  } else {
    visible.value = true;
  }
};

// 视频渲染完成触发
const onVideoLoaded = () => {
  scrollToBottom();
}

// 发起通话
const videoPhone = () => {
  alert('通话')
}

// 滚动到最底部
const scrollToBottom = () => {
  if (scrollbarRef.value) {
    scrollbarRef.value.$nextTick(() => {
      const contentHeight = scrollbarRef.value.$el.querySelector('.el-scrollbar__view').scrollHeight;
      scrollbarRef.value.setScrollTop(contentHeight);
    });
  }
};
</script>

<style scoped lang="scss">
.chat-conservation {
  height: 100%;
  overflow: hidden;
  flex: 1;
  background-color: #f5f5f5;

  .chat-messages {
    height: 77%;
    overflow-y: auto;

    .chat-scroll {
      padding: 10px 20px;
    }

    .message {
      margin-bottom: 10px;
      margin-left: 5px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;

      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 5px;
      }

      .chat-bubble {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        max-width: 60%;
        padding: 10px;
        background-color: #FFFFFF;
        border-radius: 5px;
        color: #333;
        font-size: 14px;
        position: relative;
        min-height: 40px;
        margin-left: 10px;
      }

      .chat-bubble::before {
        content: '';
        position: absolute;
        left: -5px;
        top: 15px;
        border-style: solid;
        transform: rotate(-45deg);
        border-width: 10px 10px 0 0;
        border-color: #FFFFFF transparent transparent transparent;
      }

      .content-image {
        width: 100px;
        height: 100px;

        .image-error {
          width: 100%;
          height: 100%;
          object-fit: fill;
        }
      }

      .content-video {
        width: 100%;
        height: 100%;
      }
    }

    .message-mine {
      flex-direction: row-reverse;
      margin-right: 5px;

      .chat-bubble {
        margin-right: 10px;
        background-color: #95ec69;
      }

      .chat-bubble::before {
        left: unset;
        right: -5px;
        transform: rotate(135deg);
        border-color: #95ec69 transparent transparent transparent;
      }
    }
  }

  .chat-content {
    padding: 0 20px;
    border-top: 1px solid rgba(221, 221, 221, 0.66);
    width: 100%;
    height: 23%;
    position: relative;

    .chat-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 40px;
      position: relative;

      .send-emoji {
        display: flex;
        align-items: center;
      }
      .send-emoji, .send-file {
        width: 30px;
        margin-right: 15px;
      }
      .send-video {
        position: absolute;
        right: 0;
      }

    }

    .message-input {
      width: 100%;
      height: 80px;
      padding: 8px 0;
      background-color: #f5f5f5;
      font-size: 14px;
      letter-spacing: 2px;
    }

    .send-message {
      background-color: #ececec;
      border-radius: 5px;
      color: #55f504;
      font-size: 18px;
      width: 100px;
      height: 40px;
      align-content: center;
      text-align: center;
      position: absolute;
      right: 20px;
      bottom: 10px;
      cursor: pointer;

      &:hover {
        background-color: #d0d0d0;
      }
    }
  }
}

</style>
<style lang="scss">
.send-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px !important;

  .el-popover__title {
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 1px;
  }
}
</style>
